<template>
  <div>
     <div class="range">
      <span ref="rangeShow" :style="{ width: percentage }"></span>
    </div>
    <div v-if="songs" class="box">
      <div class="pic-name" @click="ejectLyric">
        <div class="hidden">
          <img
            :class="{ running: playing, pause: !playing }"
            :src="songs.al.picUrl"
          />
        </div>
        <p>
          <span>{{ songs.name }}</span>
          <span v-for="ar in songs.ar" :key="ar.id" class="arName">
            - {{ ar.name }}</span
          >
        </p>
      </div>
      <div class="btn">
        <canvas ref="canvas" width="32" height="32"></canvas>
        <img v-if="playing" src="../assets/pauseBar.png" alt="" @click="onpause" />
        <img v-else src="../assets/play.png" alt="" @click="onplay" />
        <img @click="ejectList" src="../assets/list.png" alt="" />
      </div>
    </div>
    <!-- <div v-if="show" class="list-fixed">
      <div class="list_bg"></div>
      <ListDetailMain />
    </div> -->
  </div>
</template>

<script>
export default {
  props: {
    songId: Number,
    playing: Boolean,
    isPlayList: Boolean,
    currentTime: Number,
    duration: Number,
  },
  data() {
    return {
      songs: null,
      play: true,
      flag: false,
      listArr: [],
    };
  },
  created() {
    this.axios
      .get("https://apis.netstart.cn/music/song/detail?ids=" + this.songId)
      .then((res) => {
        this.songs = res.data.songs[0];
      });
  },
  watch: {
    songId(n) {
      this.axios
        .get("https://apis.netstart.cn/music/song/detail?ids=" + n)
        .then((res) => {
          this.songs = res.data.songs[0];
        });
    },
    // currentTime(n) {
    //   var ctx = this.$refs.canvas.getContext("2d");
    //   ctx.beginPath();
    //   ctx.arc(15.5, 15.5, 14, -90, Math.PI * 2 * (n / this.duration) - 90);
    //   ctx.strokeStyle = "blue";
    //   // ctx.lineWidth = 1;
    //   ctx.stroke();
    //   ctx.closePath();
    //   ctx.beginPath();
    //   ctx.arc(15.5, 15.5, 14, Math.PI * 2 * (n / this.duration) - 90, 2 * Math.PI - 90);
    //   ctx.strokeStyle = "#ccc";
    //   // ctx.lineWidth = 1;
    //   ctx.stroke();
    //   ctx.closePath();
    // },
  },
  computed: {
    percentage() {
      return (this.currentTime / this.duration) * 100 + "%";
    },
  },
  methods: {
    onpause() {
      this.play = false;
      this.$emit("pause-btn", this.play);
    },
    onplay() {
      this.play = true;
      this.$emit("play-btn", this.play);
    },
    ejectLyric() {
      this.flag = false;
      this.$emit("eject-lyric", this.flag);
      this.$router.push({ name: "PlayPage", query: { id: this.songId } });
    },
    ejectList() {
      this.$emit("is-play-list", !this.isPlayList);
    },
  },
};
</script>

<style lang="less" scoped>
@keyframes headRotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.box {
  display: flex;
  width: 100%;
  padding: 10px;
  box-shadow: 0 0px 8px 0 rgb(197, 193, 193);
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: white;
  justify-content: space-between;
  align-items: center;
  z-index: 3;
}
.pic-name {
  display: flex;
  align-items: center;
  .hidden {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 5px;
    overflow: hidden;
  }
  img {
    width: 100%;
    animation: headRotation 5s linear infinite;
    &.running {
      animation-play-state: running;
    }
    &.pause {
      animation-play-state: paused;
    }
  }
  p {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 60vw;
    text-align: left;

    span:first-of-type {
      font-size: 14px;
    }
    .arName {
      font-size: 12px;
      color: #7f7f7f;
    }
  }
}
.btn {
  canvas {
    // width: 40px;
    // height: 40px;
    position: absolute;
    bottom: 9px;
    right: 30px;
    z-index: -1;
  }
  img {
    width: 16px;
    height: 16px;
    margin-left: 10px;

    &:last-of-type {
      width: 18px;
      height: 18px;
    }
  }
}
.range {
  width: 100vw;
  height: 2px;
  background-color: #ccc;
  position: fixed;
  bottom:50px;
  left:0;
  z-index:3;
  span {
    display: block;
    height: 100%;
    background-color: cornflowerblue;
    position: relative;
  }
}
</style>